<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <style type="text/css">
            v\:* { behavior: url(#default#VML);}
        </style>     
        <link rel="stylesheet" type="text/css" href="<?php echo $this->pubUrl ?>share/css/map/main.css"/>
        <script type="text/javascript" language="javascript" src="<?php echo $this->pubUrl ?>share/js/jquery/jquery.js"></script>
        <script type="text/javascript" language="javascript" src="<?php echo $this->pubUrl ?>share/js/jquery/jquery.pngFix.js"></script>
        <script type="text/javascript" language="javascript" src="<?php echo $this->pubUrl ?>share/js/map/map.all.js"></script>
        <script type="text/javascript" language="javascript" src="<?php echo $this->pubUrl ?>share/js/map/yxcm.all.src.js"></script>
        <script type="text/javascript" language="javascript">
            var map = null;
            var latlngs = null, sty = {}, temp = {}, coor = null, m = null, coordinates = [], roadElement = null;
                
            $(function() {
                map = new Yxcm.Map.Map({
                    container:'#map',
                    left: 0,
                    top: 0,
                    width:<?php echo $this->width?>,
                    height:<?php echo $this->height?>,
                    lat: 22.8366,
                    lng: 113.2526,
                    zoom: 9
                });
                map.show();
                
                roadElement = {
                    id:'<?php echo $this->element['id'] ?>',
                    title:'<?php echo $this->element['title'] ?>',
                    type:'line',
                    coordinates:[],
                    style:{lineColor:'<?php echo $this->element['line_color']?>', lineThickness:'<?php echo $this->element['line_thickness']?>', lineOpacity:'<?php echo $this->element['line_opacity']?>'}
                };

                roadElement.style.icon = '<?php echo $this->pubUrl?>share/css/map/images/<?php echo $this->element['icon'] ?>.gif';
                if(roadElement.style.lineColor.substr(0, 1) != '#'){
                    roadElement.style.lineColor = '#' + roadElement.style.lineColor;
                }
                <?php foreach($this->element['coordinates'] as $coordinate):?>
                roadElement.coordinates.push(new RLatLng(<?php echo $coordinate['lat']?>, <?php echo $coordinate['lng']?>));
                coordinates.push(new RLatLng(<?php echo $coordinate['lat']?>, <?php echo $coordinate['lng']?>));
                <?php endforeach;?>
                map.addMarker(roadElement);
                <?php if(count($this->pois) > 0):?>
                <?php foreach($this->pois as $poi):?>
                    latlngs = enCode('<?php echo $poi['gps_id']?>');
                    coor = new RLatLng(latlngs[1], latlngs[0]);
                    sty = {};
                    <?php if($poi['balloon_image']):?>
                    sty = {icon:'<?php $poi['balloon_image']?>'};
                    <?php endif; ?>
                    temp = {
                        id:'<?php echo $poi['road_id'].'_'.$poi['customer_id']?>',
                        type:'point',
                        title:'<?php echo $poi['shop_name'] ?>',
                        style:sty,
                        coordinates:[coor]
                    };
                    m = map.addMarker(temp);
                    <?php if($this->width >= 500 && $this->height >= 450):?>
                    m.registerEvent('click', function(arg){
                        arg.sender.showDetail();
                    });
                    m.registerEvent('afterShowDetail', showDetailDialog);
                    <?php endif; ?>
                    m.roadId = '<?php echo $poi['road_id']?>';
                    m.industryId = '<?php echo $poi['industry_id']?>';
                    m.customerId = '<?php echo $poi['customer_id']?>';
                    coordinates.push(coor);
                <?php endforeach ?>
                <?php endif; ?>

                map.maplet.setMaxBoundsByLatLngs(coordinates);
                map.refresh();
            });

            function showDetailDialog(arg){
                var url = '<?php echo $this->getUrl(NULL, 'poi', 'detail')?>/id/' + arg.sender.roadId + '' + arg.sender.customerId;
                $.ajax({
                    url:url,
                    dataType:'html',
                    success:function(data){
                        arg.sender.setDetail(data);
                        $(arg.sender.marker.div).css('z-index', 599999);
                    }
                });
            }
        </script>
    </head>
    <body style="margin: 0;padding: 0; overflow: hidden;">
        <div id="map"></div>
    </body>
</html>
